<template id="index">
  <div>
    <router-view></router-view>
    <footer>
      <ul class="footer-fiexd-ul">
        <li @click="aaa($event)">
          <router-link to="/homepage" id="box" @click="children_click($event)">
            <img src="../../assets/images/f757282bae1ad050.png" alt class="f-img-cover" />
            <img src="../../assets/images/b70a8d50bac3834f.png" alt class="f-img-cur" />
            首页
          </router-link>
        </li>
        <li @click="aaa($event)">
          <router-link to="/type" @click="children_click($event)">
            <img src="../../assets/images/23ac41ce10ca360a.png" alt class="f-img-cover" />
            <img src="../../assets/images/3e3005fba85a8de3.png" alt class="f-img-cur" />
            分类
          </router-link>
        </li>
        <li @click="aaa($event,1)">
          <router-link to="/live" @click="children_click($event)">
            <img src="../../assets/images/400b220954b71082.png" alt class="f-img-cover" />
            <img src="../../assets/images/370b551a88fc6791.png" alt class="f-img-cur" />
            直播
          </router-link>
        </li>
        <li @click="aaa($event,1)">
          <router-link to="/my" @click="children_click($event)">
            <img src="../../assets/images/cd1497620a8f1fc1.png" alt class="f-img-cover" />
            <img src="../../assets/images/a495141bfdd3de3f.png" alt class="f-img-cur" />
            我的
          </router-link>
        </li>
      </ul>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    box.click();
  },
  methods: {
    aaa(a, b) {
      if (b == 1) {
        for (var i = 0; i < 1; i++) {
          a.target.parentNode.parentNode.children[i].children[0].className = "";
          a.target.parentNode.parentNode.children[i].children[0].children[0].className="f-img-cover";
          a.target.parentNode.parentNode.children[i].children[0].children[1].className="f-img-cur";
        }
      }
      var t = a.target.parentNode.parentNode.children;
      for (var i = 0; i < t.length; i++) {
        a.target.parentNode.parentNode.children[i].children[0].className = "";
        a.target.parentNode.parentNode.children[i].children[0].children[0].className="f-img-cover";
        a.target.parentNode.parentNode.children[i].children[0].children[1].className="f-img-cur";
        console.log(a.target.parentNode.parentNode.children[i].children[0].children[0])
      }
      a.target.className = "router-link-exact-active router-link-active";
    },
    children_click(e){
      e.stopPropagation;
    }
  }
};
</script>

<style>
* {
  list-style: none;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.footer-fiexd-ul {
  display: flex;
  position: fixed;
  bottom: 0px;
  flex-direction: row;
  width: 100%;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.06);
  padding-top: 5px;
  background: #fff;
  z-index: 20;
}
.footer-fiexd-ul > li {
  width: 25%;
  text-align: center;
}
.footer-fiexd-ul > li img {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0 auto;
  margin-bottom: -5px;
}
.footer-fiexd-ul .f-img-cur {
  display: none;
}
.router-link-exact-active.router-link-active {
  color: red;
}
.router-link-exact-active.router-link-active .f-img-cur {
  display: block;
}
.router-link-exact-active.router-link-active .f-img-cover {
  display: none;
}
.footer-fiexd-ul > li > a {
  color: #999;
  font-size: 10px;
  text-decoration: none;
}
</style>